<template>
  <view class="container">
    <view class="header">
      <text>{{xslb}}</text>
    </view>
    <view class="studio-list">
      <view class="studio-item" v-for="(studio, index) in studios" :key="index">
        <view class="studio-name">
          <text>{{ studio.xsxxXsmc }}</text>
		 
        </view>
        <view class="studio-info">
			<text >人数：{{ studio.xsxxDqxss }}/{{ studio.xsxxRnxss }}</text>
			<br/>
          <text>负责人：{{ studio.xsxxXsds }}</text>
          <!-- <text>学社类别：{{ studio.xsxxRnxss }}</text> -->
        </view>
        <view class="view-button" @click="navigateToDetail(studio)">
          <text>查看</text>
        </view>
      </view>
    </view>
  </view>
  
</template>

<script>
	import { listXsxx }from "@/api/admin/xsxx";
export default {
  data() {
    return {
      studios: [],
	  xslb:null,
	  lbid:null,
    }
  },
  onLoad(options) {
        // options 参数包含了所有从上一个页面传递过来的查询参数
        if (options) {
          this.xslb = options.xsglXslb; 
          this.lbid = options.id; 
		  this.getlistXsxx()
		  // 将 ID 存储到组件的 data 中
          // 你可以在这里根据 ID 加载更多详情数据
          // 例如，调用 API 获取与该 ID 相关的数据
          // this.loadDetails(this.detailId);
        } else {
          console.error('No ID passed to Details page');
        }
      },
  methods: {
    navigateToDetail(studio) {
		//TODO跳转到详情页面
      uni.navigateTo({
        url: `/pages/ckds/xq/xq?id=${studio.id}&xsxxXsmc=${studio.xsxxXsmc}&xslb=${this.xslb}`
      })
    },
	getlistXsxx() {
		const queryParams={
		        xsxxXslb: this.lbid,
		        deletemark: null,
		      }
	  listXsxx(queryParams).then(response => {
	    this.studios = response.rows
	  })
	}
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  margin: 20rpx 0 40rpx;
  padding: 20rpx;
}

.header text {
  font-size: 36rpx;
  font-weight: 600;
  color: #303133;
  position: relative;
  padding-left: 24rpx;
}

.header text::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 6rpx;
  height: 32rpx;
  background-color: #409eff;
  border-radius: 3rpx;
}

.studio-list {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.studio-item {
  background-color: #ffffff;
  padding: 30rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.studio-item:active {
  transform: scale(0.98);
}

.studio-name {
  font-size: 32rpx;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16rpx;
}

.studio-info {
  font-size: 28rpx;
  color: #606266;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.studio-info text {
  display: block;
}

.view-button {
  margin-top: 20rpx;
  padding: 16rpx 32rpx;
  background-color: #409eff;
  color: white;
  border-radius: 8rpx;
  font-size: 28rpx;
  text-align: center;
  transition: all 0.3s ease;
}

.view-button:active {
  background-color: #3a8ee6;
}

/* 新增样式 */
.studio-item {
  position: relative;
  overflow: hidden;
}

.studio-item::after {
  content: '';
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 16rpx;
  height: 16rpx;
  border-top: 4rpx solid #909399;
  border-right: 4rpx solid #909399;
  transform: rotate(45deg);
  opacity: 0.5;
}

.studio-info text:first-child {
  color: #409eff;
  font-weight: 500;
}

.studio-info text:last-child {
  color: #67c23a;
}
</style>